<template>
  <!-- 个人信息 -->
  <view>
    <view class="alldiv">
      <!-- 头部导航 -->

      <!-- 大盒子区域 -->
      <view class="bodydiv">
        <!-- 用户头像区域 -->
        <!-- <FileUploader @uploadEnd="handleUploadEnd" :avatar="user.avatar" ></FileUploader> -->
        <!-- 这个是个人信息区域 -->
        <view class="information">
<!--          姓名-->
          <view class="infodiv">
            <u-cell-group>
              <u-cell :label="language.PersonalInformation.nam"></u-cell>
              <u-cell>
                <view slot="title">
                  <u--input
                    :placeholder="language.PersonalInformation.namplaceholder"
                    border="none"
                    v-model="user.nickName"

                  ></u--input>
                </view>

              </u-cell>
            </u-cell-group>
          </view>
          <!--          电话-->
          <view class="infodiv">
            <u-cell-group>
              <u-cell :label="language.PersonalInformation.phonenumber"></u-cell>
              <u-cell>
                <view slot="title">
                  <u--input
                      :placeholder="language.PersonalInformation.phonenumberPlaceholder"
                      border="none"
                      v-model="user.phonenumber"
                  ></u--input>
                  <view class="infodiv">
                    <u-button type="primary" @click="showCurrentPhonePopup">修改手机号</u-button>
                  </view>

                </view>

              </u-cell>
            </u-cell-group>
          </view>
          <!--          邮箱-->
          <view class="infodiv">
            <u-cell-group>
              <u-cell :label="language.PersonalInformation.email"></u-cell>
              <u-cell>
                <view slot="title">
                  <u--input
                      :placeholder="language.PersonalInformation.emailPlaceholder"
                      border="none"
                      v-model="user.email"

                  ></u--input>
                </view>

              </u-cell>
            </u-cell-group>
          </view>

          <view class="submitdiv">
            <u-button type="primary" @click="change">{{ language.PersonalInformation.submit }}</u-button>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="currentPhonePopup" mode="bottom">
      <view class="popup-content">
        <view>请输入您收到的验证码</view>
        <input class="gap" type="number" v-model="currentPhoneCode" placeholder="验证码"/>
        <button class="gap" @click="verifyCurrentPhoneCode">验证</button>
      </view>
    </uni-popup>

    <!-- 输入新手机号和验证码的弹窗 -->
    <uni-popup ref="newPhonePopup" mode="bottom">
      <view class="popup-content">
        <view>请输入新手机号和收到的验证码</view>
        <input class="gap" type="number" v-model="newPhoneNumber" placeholder="新手机号"/>
        <input class="gap" type="number" v-model="newPhoneCode" placeholder="验证码"/>
        <button class="gap" @click="sendNewPhoneCode">发送验证码</button> <!-- 新增发送验证码按钮 -->
        <button class="gap" @click="updatePhone">更新手机号</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {getInfo, profile} from "../../http/user/user";
// import FileUploader from "@/utils/FileUploader/FileUploader.vue";
import {sendCode, verifyCode} from "../../http/sms/sms";
export default {
  // components: {FileUploader},
  data() {
    return {

      currentPhoneCode: '', // 当前手机号验证码
      newPhoneNumber: '', // 新手机号
      newPhoneCode: '', // 新手机号验证码
  user: {},
      language: {},
      // 切换的语言
      src: "https://api.yntskj.net//Upload/20240310/20240310142618_9948.jpg",
      //   姓名
      username: "张三",
      //   个人签名
      qmmao:
        "个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名个人签名",
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  //   从vuex中获取用户信息
    this.user = this.$store.state.user.information
    console.log(this.user)
  },
  onLoad() {
    this.getlanguagedata();
    this.updateUserInfo();
    this.user = this.$store.state.user.information
    console.log(this.user)

  },
  mounted() {
    this.getlanguagedata();
    this.updateUserInfo();
    this.user = this.$store.state.user.information
    console.log(this.user)
  },
  methods: {
    showCurrentPhonePopup() {

      //判断user.phonenumber是否为空如果为空旧直接打开修改窗口
      if (!this.user.phonenumber) {
        this.$refs.newPhonePopup.open();
        return;
      }
      this.$refs.currentPhonePopup.open();
      // 发送验证码到当前手机号的逻辑
      sendCode(this.user.phonenumber).then((response) => {
        // 处理响应
        console.log("验证码发送成功", response);
      }).catch((error) => {
        console.error("验证码发送失败", error);
      });
      // 假设的方法: this.sendVerificationCode(this.user.phoneNumber);
    },

    // 验证当前手机号的验证码
    verifyCurrentPhoneCode() {
      verifyCode(this.currentPhoneCode, this.user.phonenumber).then((response) => {
        // 验证成功，继续注册逻辑
        console.log(response)
        if (response.code===200){
          this.$refs.currentPhonePopup.close();
          this.$refs.newPhonePopup.open();


        }
        uni.showToast({
          title: response.msg,
          icon: "none",
          duration: 2000,
        });

      }).catch((error) => {
        uni.showToast({
          title: "验证码错误或已失效",
          icon: "none",
          duration: 2000,
        });
        console.error("验证码验证失败", error);
      });


    },

    // 显示输入新手机号和验证码的弹窗
    showNewPhonePopup() {
      this.$refs.newPhonePopup.open();
    },

    // 更新手机号
    sendNewPhoneCode() {
      if (!this.newPhoneNumber) {
        uni.showToast({
          title: "请输入新手机号",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      sendCode(this.newPhoneNumber).then((response) => {
        console.log("验证码发送成功", response);
        uni.showToast({
          title: "验证码已发送到新手机号",
          icon: "success",
          duration: 2000,
        });
        // 可以在这里启动一个倒计时，禁用发送验证码按钮，避免频繁发送
      }).catch((error) => {
        console.error("验证码发送失败", error);
        uni.showToast({
          title: "验证码发送失败",
          icon: "none",
          duration: 2000,
        });
      });
    },

    // 更新手机号
    updatePhone() {
      if (!this.newPhoneCode) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      verifyCode(this.newPhoneCode, this.newPhoneNumber).then((response) => {
        // 验证成功，调用后端接口更新手机号
        console.log("新手机号验证成功", response);

        if (response.code===200){
          this.user.phonenumber = this.newPhoneNumber
          this.change()

          uni.showToast({
            title: "手机号更新成功",
            icon: "success",
            duration: 2000,
          });
          this.$refs.newPhonePopup.close(); // 关闭弹窗
        }else {
          uni.showToast({
            title: "验证码错误或者失效",
            icon: "success",
            duration: 2000,
          });
        }
        // 更新成功后的逻辑

      }).catch((error) => {
        uni.showToast({
          title: "验证码错误或已失效",
          icon: "none",
          duration: 2000,
        });
        console.error("新手机号验证失败", error);
      });
    },

    handleUploadEnd(url) {
      // 在这里处理上传结束后返回的URL
      console.log(url);

      this.user.avatar = url;

    },

    //更新用户信息
    updateUserInfo() {
      getInfo().then((res) => { // 注意这里改为箭头函数
        console.log("getInfo 执行了")
        // 现在这里的this指向外层的Vue实例
        this.$store.commit('user/SET_USER_INFO', res.user);
      });
    },
    //profile
    change() {
      this.username = this.username;
      this.qmmao = this.qmmao;
      console.log(this.user);
      profile(this.user).then((res) => {
        console.log(res);

        getInfo().then((res) => { // 注意这里改为箭头函数
          console.log("getInfo 执行了")
          // 现在这里的this指向外层的Vue实例
          this.$store.commit('user/SET_USER_INFO', {});
          this.$store.commit('user/SET_USER_INFO', res.user);
          //提示修改成功
          uni.showToast({
            title: this.language.PersonalInformation.prompt,
            icon: "success",
            duration: 2000,
          });

          //跳转到个人中心


          //延时跳转
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/Personalcenter/Personalcenter",
            });
          }, 2000);



        });
      });
      //
    },

    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
    },
    // 返回上一个页面
    navigateBack() {
      console.log(455);
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
  },
};
</script>

<style lang="less">
.alldiv {
  width: 100%;
  height: 100vh;
  background: rgba(250, 251, 253, 1);
  // 头部导航栏样式
  .headiv {
    width: 750rpx;
    height: 10%;
    z-index: 9999;
    //居中
    display: flex;
    margin: auto;

  }
  // 主体区域样式
  .bodydiv {
    width: 100%;
    height: 90%;
    // 这个是头像区域样式
    .headsculpture {
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 72px;
        height: 72px;
        border-radius: 8px;
        position: absolute;
      }
      .xcicon {
        width: 30px;
        height: 30px;
        background: rgba(0, 0, 0, 0.65);
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        border-radius: 50%;
        top: 21px;
        left: 20px;
      }
    }
    // 这个是个人信息区域样式
    .information {
      width: 100%;
      height: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .infodiv {
        width: 90%;
        height: auto;
        margin-bottom: 20px;
        margin-top: 20px;
        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
.popup-content{
  padding: 30rpx;
  background-color: #ffffff;
}
.gap{
  margin-top: 20rpx;
}
</style>
